<template>
<!-- 全屏 -->
   <!-- 因为要布局，所以变成块元素 -->
   <div>
      <svg-icon
         icon-class="fullscreen"
         style="color:#fff; width: 20px; height: 20px"
         @click="changeScreen"
      />
   </div>
</template>

<script>
import ScreenFull from 'screenfull'
export default {
   methods: {
      changeScreen() {
         // 全屏的方法,执行一下这个方法，原生方法
         // document.documentElement.requestFullscreen()
         // 退出全屏
         // document.exitFullscreen()
         if (!ScreenFull.isEnabled) {
            this.$message.warning('当前全屏功能不可用')
            return
         }
         // 直接全屏，既可以全屏，也可以退出全屏
         ScreenFull.toggle()
      }
   }
}
</script>

<style lang="scss" scoped></style>
